<template>
	<view class="rel-name-page">
		<view class="rel-name-input">
			<u--input disabled border="none" shape="circle" class="inpt" v-model="user.mobile">
			</u--input>
			<u--input placeholder="请输入真实姓名" border="none" shape="circle" class="inpt m-b-15" v-model="nameValue">
			</u--input>
			<u--input placeholder="请输入身份证号码" maxlength="18" border="none" shape="circle" class="inpt" v-model="value" @blur="checkIdCard"></u--input>
			<view class="text-center f-xxs m-t-5" style="color: #FF5442;" v-show="isShowErr">身份证号码有误，请重新输入</view>
		</view>
		<u-button text="开始认证" shape="circle" color=" #4ABC5A" class="start-button" @click="showPopup" :disabled="disabled"></u-button>
		<!-- <view class="note-one">
			实名之后手机号不可修改，请确认手机号是否与实名信息一致
		</view> -->
		<view class="note-two">
			实名身份信息需与手机号绑定身份一致，同一实名信息仅可实名认证一个手机号
		</view>
		<popup :title="popupName" content="实名认证后不可修改<br/>请确认填写的信息无误" ref="popupRef"  @reserved="reserved">
			</popup>
		<u-toast ref="uToast"></u-toast>
		<u-popup :show="isShow" mode="center" round="10" @close="isShow = false">
			<view class="notice p-20">
				<u-icon @click="isShow = false" name="close-circle-fill" size="23" color="#C1C4CA" class="close"></u-icon>
				<view v-html="popupData.msg" ></view>
				<!-- <view class="text-center bold f-large m-b-10">您的身份信息已绑定其他账号</view>
				<view class="text-center f-xs grey m-b-15"> 可添加客服人员微信进行处理</view> -->
				<view class="flex-no-horizontal center">
					<u-image :src="popupData.qrCode" width="296rpx" height="296rpx" radius="5"></u-image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { attestedAgin } from '@/api/user.js'
	import popup from './common/popup.vue'
	import {mapState} from 'vuex'
	export default {
		components: {
			popup
		},
		data() {
			return {
				value:'',
				nameValue:'',
				popupName: '',
				isShowErr: false,
				isShow: false,
				popupData: {
					msg: '',
					qrCode: ''
				}
			}
		},
		computed: {
			...mapState({
				user: state => state.userInfo
			}),
			disabled() {
				return !(this.nameValue && this.value.length === 18)
			}
		},
		methods: {
			showPopup() {
				if (!(this.value && this.nameValue)) {
					uni.showToast({
						title: '请填写姓名和身份证号',
						icon: 'none'
					})
					return
				}
				if (this.value.length !== 18) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					})
					return
				}
				this.$refs.popupRef.open()
				this.popupName = '确定实名认证吗？'
			},
			reserved() {
				this.relName()
			},
			//消息提示
			showToast(msg) {
				this.$refs.uToast.show({
					type:"default",
					message:msg
				})
			},
			checkIdCard() {
				this.isShowErr = this.value.length !== 18
			},
			async relName(){
				try{
					uni.showLoading({
						mask: true
					})
					const res = await attestedAgin({
						  identifyNum: this.value,
						  userName: this.nameValue
					})
					this.$refs.popupRef.close()
					uni.hideLoading()
					this.showToast("认证成功")
					this.$store.dispatch('getUserInfo')
					uni.$emit('attestAginSuccess')
					setTimeout(()=>{
						uni.navigateBack()
					},1500)

				}catch(e){
					this.$refs.popupRef.close()
					uni.hideLoading()
					if (e.code === 12001) {
						this.popupData = e.data
						this.isShow = true
					} else {
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					}
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.rel-name-page {
		padding: 0 40rpx;

		.rel-name-input {
			.inpt {
				background-color: #F7F7F7 !important;
				height: 90rpx;
			}

			.inpt:first-child {
				margin: 71rpx 0 30rpx;
				::v-deep .u-input__content__field-wrapper__field{
					color: #B3B4B5 !important;
				}
			}
		}

		.start-button {
			margin: 60rpx 0;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

		.note-one {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8F9091;
		}

		.note-two {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8F9091;
			line-height: 42rpx;
			margin-top: 33rpx;
		}

		::v-deep .uni-input-input {
			padding-left: 20px;
		}

		.notice{
			width: 590rpx;
			position: relative;
			background: #F4F6FA;
			border-radius: 20rpx;
			.center{
				justify-content: center;
			}
			.grey{
				opacity: 0.5;
			}
			.close{
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
		}
	}

	::v-deep.input-placeholder {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #B3B4B5;
		padding-left: 40rpx;
	}
</style>
